/**
 * according to the visible area to set the page width and height.
 * include the login area,background area,title area.
 * then,it will store the coordination with left and top.
 */
function setWidthandHeight(){
	var _wh = getVisualAreaWH();
	_wh.height = _wh.height < 720?720:_wh.height;
	_wh.width = _wh.width < 1024?1024:_wh.width;
	$('div').eq(0).css({'height':(_wh.height-20) +'px','width':(_wh.width - 15) +'px'});
	if(window.press_login == 'y'){
		return;
	}
	window.div_height = $('div').eq(0).height();
	window.login_top = _wh.height/2 - 150;
	window.sub_h = _wh.height/2 - 100;
	window.login_left = _wh.width - (350+80);
	window.sub2_top = _wh.height - sub_h;
	window.sub_top = 0;
	window.area_width = _wh.width;
	$('#login').css({'top':login_top+'px','left':login_left+'px'});
	$('#div_sub_1').css({'height':sub_h+'px','width':(_wh.width - 5)+'px'});
	$('#div_sub_2').css({'height':sub_h+'px','width':(_wh.width - 5)+'px','top':sub2_top+'px'});
	$('#title').css('top',login_top+'px');
}

/**
 * set the login area to reach default state except the coordination.
 * when the mouse up to the login area,if the login area over the left or right border,
 * it will set the login area left(x) equal 1 or equal the visible area width.
 * and then,it will set the mouse icon and the box shadow to be default. 
 */
function loginDivReset(){
	if(window.press_login == 'y')
		return;
	window.mark = 'n';
	$('#login').css('cursor','default');
	$('#login').css('box-shadow','2px 2px 1px rgba(0,0,0,0.2)');
	if(window.login_left < 1){
		$('#login').css('left','1px');
		window.login_left = 1;
	}
	if(window.login_left > area_width - 355){
		$('#login').css('left',(area_width - 355) + 'px');
		window.login_left = area_width - 355;
	}
	$('#login').css('position','absolute');
}

/**
 * initial the page
 * 
 */
$(document).ready(function(){
	window.login_field = 'none'; /** is the mark about the cursor if within the text field */
	setWidthandHeight();	/** set the default page width and height */
	
	/**
	 * effects with the text fields.
	 * when the mouse over the text fields,it will change the color of the border.
	 * when the cursor in the text fields,it will change the color of the border.
	 * when the mouse or cursor leave the text fields,it will return the color border before.
	 * 
	 */
	$('input').focus(function(e){
				  window.login_field = $(this).attr('name')+'_text';
				  $('#'+$(this).attr('name')+'_text').css('border-color','#D1F902');
				  $(this).css('background-color','#FFF');
			  }).blur(function(e){
				  window.login_field = 'none';
				  $('#'+$(this).attr('name')+'_text').css('border-color','#CFD0D0');
				  if($(this).val()=='')
				  	$(this).css('background-color','#F3F3F3');
			  });
	/** text area effects setting */
	$('div[id$=text]').mouseover(function(){
			window.mark = 'e';
			$(this).css('border-color','#D1F902');
		}).mouseout(function(){
				window.mark = '';
				if(window.login_field == $(this).attr('id'))
					return;
				$(this).css('border-color','#CFD0D0');
			});
	/** text fields effects end */
	
	/**
	 * effects with the buttons.
	 * when the mouse over the button,it will change to the color.
	 * when the mouse out the button,it will return the color before.
	 * when the mouse click the button,it will remove the shadow.
	 * when the mouse after click the button,it will add the shadow. 
	 * 
	 */
	$('div[id$=_btn]').mouseover(function(e){
		window.mark = 'e';
		$('#'+$(this).attr('id').split('_')[0]+'_btn').css('background','#D1F902');
	}).mouseout(function(e){
		window.mark = '';
		$('#'+$(this).attr('id').split('_')[0]+'_btn').css('background','#FFF');
		$('#'+$(this).attr('id').split('_')[0]+'_btn').removeClass('btn_down');
		$('#'+$(this).attr('id').split('_')[0]+'_btn').addClass('btn_up');
	}).mouseup(function(e){
		$('#'+$(this).attr('id').split('_')[0]+'_btn').removeClass('btn_down');
		$('#'+$(this).attr('id').split('_')[0]+'_btn').addClass('btn_up');
	}).mousedown(function(e){
		$('#'+$(this).attr('id').split('_')[0]+'_btn').removeClass('btn_up');
		$('#'+$(this).attr('id').split('_')[0]+'_btn').addClass('btn_down');
	});
	/** buttons effects end */
	
	/**
	 * set the width and height when the browser change the size.
	 */
	if (window.addEventListener) {
		window.addEventListener('resize', setWidthandHeight, null);/** DOM2.0 */
	} else if (window.attachEvent) {
		window.attachEvent('onresize', setWidthandHeight);/** IE5+ */
	} else {
		window['on' + evType] = fn;/** DOM 0 */
	}
	
	/** the button events bind start */
	/** 
	 * click the login button and register button on the last step.
	 * send the info to the server and server handle it and response the message to the page.
	 * if login info passed,page will show the cool animation to enter the home page,
	 * or tip the user the error info. 
	 */
	$('#login_btn,#login_label_btn,#complete_btn,#complete_label_btn').click(function(e){
		window.press_login = 'y';
		window.press_flag = true;
		loginDivDisappear();
	});
	
	/**
	 * click the register button,hide the login area,check code area and show the register area.
	 * 
	 */
	$('#register_btn,#register_label_btn').click(function(e){
		$('table').eq(0).css('display','none');
		$('table').eq(1).css('display','block');
		$('table').eq(2).css('display','none');
	});
	
	/**
	 * click the return button on the register area,hide the register area,check code area and show the login area.
	 *
	 */
	$('#return_btn,#return_label_btn').click(function(e){
		$('table').eq(0).css('display','block');
		$('table').eq(1).css('display','none');
		$('table').eq(2).css('display','none');
	});
	
	/**
	 * click the next button on the register area,hide the login area,register area and show the check code area.
	 * 
	 */
	$('#next_btn,#next_label_btn').click(function(e){
		$('table').eq(0).css('display','none');
		$('table').eq(1).css('display','none');
		$('table').eq(2).css('display','block');
	});
	
	/**
	 * click the previous button on the check code area,hide the login area,check code area and show the register area.
	 * 
	 */
	$('#previous_btn,#previous_label_btn').click(function(e){
		$('table').eq(0).css('display','none');
		$('table').eq(1).css('display','block');
		$('table').eq(2).css('display','none');
	});
	/** the button events bind end */
	
	/**
	 * setting the login area default state.
	 */
	$(window).mouseup(function(e){loginDivReset();});
	
	/**
	 * press the login area,you can drag the login area to left or right.that is cool.
	 */
	$('#login').mousedown(function(e){
		window.mark = window.mark!='e'?'y':'n';
		if(window.mark == 'y'){
			$(this).css('cursor','pointer');
			$(this).css('box-shadow','0px 0px 0px rgba(0,0,0,0.2)');
			window.loginX = e.pageX;
		}
	}).mouseup(function(e){
		loginDivReset();	/** release the login,it will set the login to default. */
	}).mousemove(function(e){
		var _x = e.pageX;
		var _y = e.pageY;
		var _left = $(this).offset().left;
		var _width = _left + 300;
		var _height = login_top + 350;
		/** handle the login area to move(limit left and right,no up and down.) */
		if(window.mark == 'y'){
			if(_x >= _left && _y >= login_top && _y <= _height && _x <= _width){
				var _diff = window.loginX - e.pageX;
				window.login_left = window.login_left - _diff;
				$(this).css({'left':window.login_left+'px','position':'fixed'});
				window.loginX = e.pageX;
			}
		}
	});
	
	/** this setting will make the text fields can view the same in the IE browser and the FF,Chrome browser. */
	$('input').each(function(e){if(browser.indexOf('IE') != -1)$(this).css('width','99%');});
	
});

/** 
 * login area animation effect handling.
 */
function loginDivDisappear(){
	if(window.login_left >= window.area_width/2 && window.login_left <= window.area_width){
		login_left += 10;
		$('#login').css({'left':login_left+'px','position':'fixed'});
		setTimeout(function(){loginDivDisappear();},20);
	}else if(login_left + 355 >=0 && login_left < window.area_width/2){
		login_left -= 10;
		$('#login').css('left',login_left+'px');
		setTimeout(function(){loginDivDisappear();},20);
	}else{
		if(press_flag){
			$('#login').css({'display':'none','position':'absolute'});
			press_flag = false;
			divMoveUp();
			divMoveDown();
		}
	}
}

/**
 * the up title area animation effects handling.
 */
function divMoveDown(){
	if(window.sub2_top < window.div_height + 20){
		window.sub2_top += 10;
		$('#div_sub_2').css({'position':'fixed','top':window.sub2_top+'px'});
		setTimeout(function(){divMoveDown();},20);
	}else{
		$('#div_sub_2').css({'display':'none','position':'absolute'});
		if($('#div_sub_1').css('display')=='none')
			window.press_login = '';
	}
}

/**
 * the down title area animation effects handling.
 */
function divMoveUp(){
	if(window.sub_top > window.sub_h * -1){
		window.sub_top -= 10;
		$('#div_sub_1').css('top',window.sub_top+'px');
		setTimeout(function(){divMoveUp();},20);
	}else{
		$('#div_sub_1').css('display','none');
		if($('#div_sub_2').css('display')=='none')
			window.press_login = '';
	}
}